<template>
  <div class="row-text">
    <div class="heading">
      <div class="title van-ellipsis">{{ title }}</div>
      <div class="price">{{ price }}</div>
    </div>

    <div class="desc">
      <span>{{ desc }}</span>
      <span>{{ address }}</span>
    </div>

    <div class="tags">
      <van-tag v-for="(item, index) in tags" :key="index" plain color="#BBBBBB">{{ item }}</van-tag>
    </div>

    <div class="footer">
      <van-image round width="19px" height="19px" :src="avatar" />
      <span class="author">{{ author }}</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tag, Image as VanImage } from 'vant'

Vue.use(Tag).use(VanImage)

export default {
  props: {
    title: {
      type: String,
      default: ''
    },

    price: {
      type: String,
      default: ''
    },

    desc: {
      type: String,
      default: ''
    },

    address: {
      type: String,
      default: ''
    },

    tags: {
      type: Array,
      default: () => []
    },

    avatar: {
      type: String,
      default: ''
    },

    author: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
.row-text {
  border-top: 0.5px solid #eeeeee;
  padding: 12px 0 15.5px 0;
  margin: 0 17px;

  .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      flex: 1;
      font-size: 17px;
      color: #222222;
      font-weight: 500;
    }

    .price {
      font-size: 17px;
      color: #4586ff;
      font-weight: 500;
    }
  }

  .desc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    font-size: 12px;
    margin-top: 2px;
  }

  .tags {
    margin-top: 12.5px;
  }

  .footer {
    display: flex;
    align-items: center;
    margin-top: 15px;

    .author {
      margin-left: 6.5px;
      font-size: 14px;
      color: #666666;
    }
  }
}
</style>